<template>
  <div class="content">
    <!-- 头部 -->
    <van-sticky>
      <div class="header">
        <div class="title">
          <van-icon class="icon-home" name="wap-home-o" @click="toHome" />
          <span>网易严选</span>
          <van-icon class="icon-search" name="search" @click="toSearch" />
          <van-icon
            class="icon-shopping-cart-o"
            name="shopping-cart-o"
            badge="6"
            @click="toCart"
          />
        </div>
      </div>
    </van-sticky>
    <!-- 标签栏及内容区 -->
    <van-tabs sticky :offset-top="45" @click="handleToggle" @scroll="handlerhuadong()">
      <van-tab :title="item.name" v-for="item in categoryL2List" :key="item.id">
        <div class="skulist">
          <div class="split-box"></div>
          <div class="text-box">甄选品质，睡眠美学</div>
          <div class="skulist-content">
            <div
              class="skuItem"
              v-for="item in categoryItems.itemList"
              :key="item.id"
              @click="toDetail"
            >
              <div class="skuImg"><img :src="item.listPicUrl" alt="" /></div>
              <div class="skuName">{{ item.name }}</div>
              <div class="skuPrice">
                <p>
                  到手价￥<span class="Price1">{{ item.retailPrice }}</span
                  ><span class="Price2">￥{{ item.counterPrice }}</span>
                </p>
                <div class="Label-round">
                  <van-tag round type="danger">满99减15远</van-tag>
                </div>
              </div>
            </div>
          </div>
          <div class="botton-text">更多内容，敬请期待</div>
        </div>
      </van-tab>
    </van-tabs>
    <!--点击返回顶部  -->
    <div class="back-totop" @click="toTop" v-show="flag">
      <van-icon name="back-top" />
    </div>
  </div>
</template>

<script>
import { reqCategoryList } from "@/api";
export default {
  name: "categoryList",
  data() {
    return {
      categoryId: "", //首页传来的ID
      subCategoryId: "",
      categoryL2List: [], //导航栏
      categoryItems: [], //商品列表
      // navId:'', //导航切换的id
      flag: false//小米球第一页是否显示
    };
  },
  mounted() {
    //    先把首页传来的ID保存在data
    this.categoryId = this.$route.query.categoryId;
    this.subCategoryId = this.$route.query.subCategoryId;
    // 打开页面后，渲染数据
    this.getreqCategoryList();
  },
  methods: {
    // 点击发送请求获取页面数据
    async getreqCategoryList() {
      //结构赋值获得首页传来的ID
      let { categoryId, subCategoryId } = this;
      let result = await reqCategoryList(categoryId, subCategoryId);
      this.categoryL2List = result.data.categoryL2List; //导航列表
      this.categoryItems = result.data.categoryItems; //商品列表
    },
    //通过导航切换
    async handleToggle(subCategoryId) {
      let navId = this.categoryL2List[subCategoryId].id;
      let result = await reqCategoryList(this.categoryId, navId);
      this.categoryItems = result.data.categoryItems;
      console.log(this.categoryItems);
    },

    //小米球
    toTop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      //实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop =
          document.documentElement.scrollTop =
          top -=
            50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },
    // 滑动获取距离顶部距离，判断小米球是否显示
    handlerhuadong(){
      let scrollTop =document.documentElement.scrollTop || document.body.scrollTop;
      if(scrollTop>500){
        this.flag= true;
      }else{
        this.flag= false;
      }
    },
    //点击返回首页
    toHome() {
      this.$router.push({ path: "/home" });
    },
    //点击前往商品详情
    toDetail() {
      this.$router.push({ path: "/detail" });
    },
    //前往搜索页面
    toSearch() {
      this.$router.push({ path: "/search" });
    },
    //前往购物车
    toCart() {
      this.$router.push({ path: "/cart" });
    },
  },
};
</script>

<style lang="less"scoped>
.content {
  .header {
    width: 100%;
    height: 45px;
    border-bottom: 2px solid #fafafa;
    background-color: #fafafa;
    .title {
      line-height: 43px;
      width: 92%;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      .icon-home {
        float: left;
        line-height: 43px;
      }
      span {
        width: 100%;
        margin-left: 100px;
        font-size: 20px;
      }
      .icon-search {
        float: right;
        line-height: 43px;
        margin-right: 15px;
      }
      .icon-shopping-cart-o {
        line-height: 43px;
        .van-info {
          margin-top: 10px;
        }
      }
    }
  }
  .skulist {
    .split-box {
      width: 100%;
      height: 10px;
      background-color: #eeeeee;
    }
    .text-box {
      width: 100%;
      height: 55px;
      background-color: #ffffff;
      font-size: 13px;
      line-height: 55px;
      text-align: center;
    }
    .skulist-content {
      display: flex;
      flex-wrap: wrap;
      background-color: #ffffff;
      .skuItem {
        width: 173px;
        height: 284px;
        margin: 0 7px 20px;
        .skuImg {
          width: 100%;
          height: 173px;
          img {
            width: 100%;
            height: 100%;
            border-radius: 15px;
          }
        }
        .skuName {
          width: 100%;
          height: 45px;
          font-size: 15px;
          margin-top: 8px;
        }
        .skuPrice {
          width: 100%;
          height: 30px;
          p {
            font-size: 12px;
            font-weight: 600;
            color: #fa1e32;
            .Price1 {
              font-size: 20px;
              font-weight: 600;
            }
            .Price2 {
              font-weight: 500;
              text-decoration: line-through;
              color: #9a9a9a;
            }
          }
          .Label-round {
            width: 100%;
            height: 18px;
            margin-top: 5px;

            display: flex;
          }
        }
      }
    }
    .botton-text {
      width: 100%;
      height: 50px;
      background-color: #eeeeee;
      font-size: 12px;
      line-height: 50px;
      text-align: center;
      color: #999999;
    }
  }
  .back-totop {
    width: 41px;
    height: 41px;
    line-height: 41px;
    text-align: center;
    border-radius: 50%;
    background-color: #70f8f89d;
    position: fixed;
    bottom: 70px;
    right: 10px;
  }
}
</style>